﻿@using QqhrCitizen.Models;
@{
    ViewBag.Title = @ViewBag.ShowLive.Title + "_齐齐哈尔市民学习网";
}
<!-- functionality -->
<script type="text/javascript" src="~/Scripts/jquery_live.js"></script>
<script src="~/Scripts/AC_RunActiveContent.js" language="javascript"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script>
    $("#topmenu_live").attr("class", "item_selected");
    AC_FL_RunContent = 0;
</script>
<style type="text/css">
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border-color: black;
    }

    li {
        color: #FFFFFF;
    }

    ul li {
        margin: 10px 0;
    }

    td img {
        display: block;
    }


    a:link {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    a:visited {
        text-decoration: none;
    }

    a:active {
        text-decoration: none;
    }
</style>


<script language="javascript">

    var queryParameters = new Array();
    var flashVars = "";
    var tag = "";
    var url = "";

    var CurrPage = 1;
    var TotalPage = 1;
    var TotalVideo = 0;

    var FileList;

    var PlayURL = "@ViewBag.ShowLive.LiveURL";

    var mainURL, subURL, hasMain, hasSub;

    window.onload = function () {
        //var htmlobj=$.ajax({url:"/fmsinfo.do",async:false});

        //FileList = htmlobj.responseText.split(":");
        mainURL = "@ViewBag.ShowLive.LiveURL";
        subURL = "@ViewBag.ShowLive.LiveURL";

    }

    function PlayVideo() {
        document.getElementById("player").src = "/Live/Player?source=" + PlayURL + "&type=live";


    }
    function playMain() {
        document.getElementById("player").src = "/Live/Player?source=" + mainURL + "&type=live";

    }
</script>

<div id="d_menu" class="d-menu menu-bok">
    <div id="d_menu_c" class="d-menu-c">
        <!-- region start: menu -->
        <div id="d_headmenu" class="d-headmenu">
            <div class="body">
                <a class="item" href="/EBook/Index" id="headmenu_default">直播首页</a>
                <a class="item" href="/Live/Review" id="headmenu_review">往期回顾</a>
            </div>
        </div><!-- region end: menu -->
    </div>
</div>
<div class="d-row">
    <div class="d-row-c">
        <div class="d-col-2-8">
            <div class="contentarea">
                <table width="677" height="380" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td valign="top" width="660" height="380">
                            <img src="~/Images/play.jpg" id="player_img" width="660" height="380" style="cursor:pointer" />
                            <iframe id="player" name="player" width="100%" height="100%" border=0 allowtransparency scrollbars=no frameborder="0" style="display:none"></iframe>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="d-col-2-4" style="width:310px">
            <div class="contentarea">
                <input type="hidden" value="@ViewBag.LiveID" id="LiveID" />
                <input type="hidden" value="@((ViewBag.CurrentUser == null) ?"":ViewBag.CurrentUser.Username)" id="currentuser" />
                <div style="min-height:380px;">
                    <div class="msgDisplay" style="height: 324px; overflow:auto;background-color: #f9f9f9;" id="msgDisplay">

                    </div>
                    <textarea id="txtMsg" class="textbox" style="height:56px;width:260px;"></textarea>
                    <button class="button blue" id="newContosoChatMessage" style="height:62px">发</br>送</button>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>


<script>
    var contosoChatHubProxy = $.connection.contosoChatHub;
    contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
        var str;
        if (name == $("#user_name_show").html()) {
            str = "<div class='popover left'><div class='arrow'></div><p class='popover-title' style='line-height:0px;text-align:right;margin-right:10px'><span style='color:#006666'>" + name + "</span>&nbsp;[<span style='color:#00CC00'>" + moment(new Date()).format("HH:mm:ss") + "]</span></p><div class='popover-content'><p style='line-height:0px;text-align:right;margin-right:15px'></span  style='color:#006666'>" + message + "</p></div></div>";

        }
        else {
            str = "<div class='popover right'><div class='arrow'></div><p class='popover-title'style='line-height:0px;text-align:left;margin-left:10px'>[<span style='color:#00CC00'>" + moment(new Date()).format("HH:mm:ss") + "]</span>&nbsp;<span style='color:#006666'>" + name + "</span></p><div class='popover-content'><p style='line-height:0px;text-align:left;margin-left:15px'><span style='color:#0000CC;'>" + message + "</span></p></div></div></div>";
        }
        console.log(str);
        $(".msgDisplay").append(str);
        $("#msgDisplay").scrollTop($("#msgDisplay")[0].scrollHeight);
        
    };

    contosoChatHubProxy.client.addGroupToShow = function (data) {

    }

    contosoChatHubProxy.client.removeGroupToShow = function (data) {

    }

    $.connection.hub.start().done(function () {
        // Wire up Send button to call NewContosoChatMessage on the server.
        contosoChatHubProxy.server.joinGroup($("#LiveID").val());
        $('#newContosoChatMessage').click(function () {
            if ($('#currentuser').val() == "") {
                CastMsg("请先登录在发送聊天信息");
                return false;
            }
            contosoChatHubProxy.server.newContosoChatMessage($('#currentuser').val(), $('#txtMsg').val(), $("#LiveID").val());
            $('#txtMsg').val('').focus();
        });
        $("#player_img").click(function () {
            playMain();
            $("#player").show();
            $("#player_img").hide();
        });

    });
</script>
<style>
    .popover {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1060;
        display: block;
        max-width: 276px;
        padding: 1px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: left;
        text-align: start;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-break: normal;
        word-spacing: normal;
        word-wrap: normal;
        white-space: normal;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        line-break: auto;
    }

        .popover > .arrow {
            border-width: 11px;
        }
        .popover > .arrow >p
        {
            line-height:0px;
        }

            .popover > .arrow, .popover > .arrow:after {
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
            }

        .popover.left {
            margin-right: 10px;
        }

            .popover.left > .arrow {
                top: 50%;
                right: -11px;
                margin-top: -11px;
                border-right-width: 0;
                border-left-color: #fff;
            }

                .popover.left > .arrow:after {
                    right: 1px;
                    bottom: -10px;
                    content: " ";
                    border-right-width: 0;
                    border-left-color: #fff;
                }

        .popover.right {
            margin-left: 10px;
        }

            .popover.right > .arrow {
                top: 50%;
                left: -11px;
                margin-top: -11px;
                border-left-width: 0;
                border-right-color: #fff;
            }

                .popover.right > .arrow:after {
                    left: 1px;
                    bottom: -10px;
                    content: " ";
                    border-left-width: 0;
                    border-right-color: #fff;
                }

    :after, :before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>